<style scoped>
  .title{
    text-align: center;
    font-size: 5vw;
    margin-top: 10vh;
    margin-bottom: 10vh;
  }
  .gift-dm-wrap{
    display: flex;
    margin: 2vw;
    align-items: center;
    border: #333 1px solid;
  }
  .gift-dm-left-wrap{
    padding-left: 1vw;
    flex-grow: 1;
    border-right: #333 1px solid;
  }
  .gift-dm-left-wrap,.gift-dm-right{
    display: flex;
    align-items: center;
  }
  .gift-dm-right{
    height: 100%;
    padding: 0 2vw;
  }
</style>
<template>
  <div v-if="mainData!=null">
    <div class="title">为您支持的{{mainData.apply.player_label}}加油吧！！</div>
    <div class="gift-dm-wrap">
      <div class="gift-dm-left-wrap">
        <i class="iconfont icon-tianxie" style="font-size: 6vw">
        </i>
        <van-field class="input-item" v-model="comment" placeholder="请输入弹幕评论内容"/>
      </div>
      <div @click="send" class="gift-dm-right">
        <span > 发送</span>
        <i class="iconfont icon-fasong" style="font-size: 6vw">
        </i>
      </div>
    </div>
  </div>
</template>
<script>
  import { isNull,getActiveId } from '@/libs/util'
  import { createComment } from '@/api/comment'
  import { getActive } from '@/api/active'
  import { wxPay } from '@/api/pay'
  export default {
    name:'comment',
    data(){
      return{
        id:null,
        pid:null,
        comment:null,
        mainData:null
      }
    },
    created () {
      this.pid = this.$route.query.pid;
      this.id = getActiveId();
      this.$wx.wxJssdkInit();
      this.initData();

    },
    methods:{
      initData () {
        try {
          let mainData = this.GLOBAL.getMainData()
          if (mainData == null || !mainData) {
            this.getData()
          } else {
            this.mainData = mainData
          }
        } catch (e) {
          this.getData()
        }
      },
      getData () {
        let vm = this
        getActive(this.id).then(rep => {
          vm.mainData = rep.data.data
          vm.GLOBAL.setMainData(vm.mainData)
        })
      },
      send () {
        if (isNull(this.comment)) {
          vant.Toast.fail('请输入评论内容')
          return
        }
        vant.Toast.loading({
          message: '加载中...',
          forbidClick: true,
        })
        let vm = this
        let data = {'content':this.comment};
        data.aid = vm.id;
        data.pid = vm.pid;
        createComment(data).then(rep => {
          let id = rep.data.data
	        debugger
	        if(vm.mainData.gift.dm_price>0){
            wxPay(id, vm.GLOBAL.payConst.TYPE_TP_COMMENT).then(rep => {
              let data = rep.data.data;
              vm.toPay(data,id);
            }, error => {
              vant.Toast.clear();
              vant.Toast.fail('支付失败')
            })
	        }else {
            vant.Toast.success('发送成功,待审核');
            vm.$router.go(-1);
	        }

        }, error => {
          vant.Toast.clear();
          vant.Toast.fail('发送失败')
        })
      },
      toPay (data, id) {
        let vm = this;
        wx.chooseWXPay({
          appId: data.appId,
          timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
          package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: data.paySign, // 支付签名
          success: function (res) {
            vant.Toast.clear();
            vant.Toast.success('发送成功');
            // 支付成功后的回调函数
            vm.$router.go(-1);
          },
          fail: function (res) {
            vant.Toast.clear();
            vant.Toast.fail('支付失败')
          }
        })
      }
    }
  }
</script>
